<template>
  <div class="pro_info">
    <!-- 图片 -->
    <van-swipe @change="onChange" class="pro_image">
      <van-swipe-item
        v-for="(item, index) in slideList.path"
        :key="index"
        class="pro_pic"
      >
        <img  :src="item" alt="" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          {{ current + 1 }}/{{ slideList.path.length}}
        </div>
      </template>
    </van-swipe>
    <!-- 价格 -->
    <div class="pro-price">
      <span>￥</span>
      <span>{{ commod.commodList[0].storeInfo.price }}</span>
    </div>
    <!-- .商品名称 -->
    <div class="pro-name">
      <span>{{ commod.commodList[0].storeInfo.store_name }}</span>
    </div>
    <!-- 库存销量 -->
    <div class="inventory">
      <ul>
        <li>
          <a href="#">
            <span>原价:￥ 380.0</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>库存: 998855件</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>销量: 568件</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";

import { mapState } from "vuex";

Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
  data() {
    return {
      current: 0,
      slideList: [],
      timer : null,
      // isShow: false,
    };
  },
  computed: {
    ...mapState(["commod"]),
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    init() {
      let slide = this.$store.state.commod.commodList[0].storeInfo.slider_image;
      let obj = {};
      obj.path = slide;
      this.slideList = obj;
      // console.log(this.$store.state.commod.commodList[0].storeInfo.slider_image);
    },
  },
  created() {
    this.timer = setInterval( ()=> {
      this.init();  
    },1000)
  //   console.log(this.slideList.path,333);
  },
  mounted(){
    // this.timer = setInterval( ()=> {
    //   this.init();  
    // },100)
  },
};
</script>

<style lang="less">
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.pro_image {
  width: 100%;
  height: 300px;
  display: flex;
  background: palegreen;
  img {
    width: 100%;
    height: 100%;
    display: block;
    &:after {
      content: url("https://i02piccdn.sogoucdn.com/3b56ef8c585a624e");
      display: block;
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
    }
  }
}
.pro-price {
  height: 40px;
  color: #9334a2;
  font-size: 30px;
  padding-left: 10px;
  padding-top: 10px;
  background: #fff;
  span {
    &:first-child {
      font-size: 18px;
    }
  }
}
.pro-name {
  width: 100%;
  height: 50px;
  font-size: 19px;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #fff;
}
.inventory {
  width: 100%;
  height: 50px;
  background: #fff;
  ul {
    display: flex;
    justify-content: space-around;
    li {
      font-size: 15px;
      line-height: 50px;
      span {
        color: #999;
      }
    }
  }
}
</style>